<!--
 * @Author: Hzh
 * @Date: 2021-04-23 10:13:38
 * @LastEditTime: 2021-04-23 15:47:58
 * @LastEditors: Hzh
 * @Description:
-->
<template>
    <div class="home">
        <div class="MXGL_card">
            <div class="MXGL_title">
                <div class="big_title">模型管理</div>
            </div>
            <div class="MXGL_content">
                <div class="search">
                    <el-input placeholder="搜索" v-model="input3">
                        <i slot="suffix" class="el-input__icon el-icon-search"></i>
                    </el-input>
                </div>
                <div class="tree">
                    <el-tree :data="data" :props="defaultProps" default-expand-all ref="tree"
                        @node-click="getNowTree"></el-tree>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            input3: "",
            data: [
                {
                    label: "断路器",
                    children: [
                        {
                            label: "A相",
                            children: [
                                {
                                    label: "主回路",
                                },
                                {
                                    label: "触头",
                                },
                                {
                                    label: "喷口",
                                },
                                {
                                    label: "盆式绝缘子",
                                },
                            ]
                        },
                        {
                            label: "B相",
                            children: [
                                {},
                            ]
                        },
                        {
                            label: "C相",
                            children: [
                                {},
                            ]
                        }
                    ]
                },
                {
                    label: "隔离开关",
                    children: [
                        {},
                    ]
                },
                {
                    label: "母线",
                    children: [
                        {},
                    ]
                }
            ],
            defaultProps: {
                children: "children",
                label: "label"
            }
        };
    },
    name: "Home",
    components: {},
    mounted() {
    },
    methods: {
        // tree的点击事件
        getNowTree(i) {
            // console.log(i.label)
            let newLabel = i.label
            let value_postMessage = ''
            switch (newLabel) {
                case '主回路':
                    value_postMessage = '001'
                    break;
                case '触头':
                    value_postMessage = '002'
                    break;
                case '喷口':
                    value_postMessage = '003'
                    break;
                case '盆式绝缘子':
                    value_postMessage = '004'
                    break;

            }
            // console.log(value_postMessage)
            // 调用postMessage  实现定位
            this.faSong_postMEssage(value_postMessage)
            // this.getQueryVariable('name')

        },
        // postMessage
        faSong_postMEssage(nv) {
            console.log('bbbbb')
            window.parent.postMessage({
                // "id": "*",
                "id": "",
                "sourceId": this.getQueryVariable('id'),
                "targetId": "*",
                "event": {
                    "type": "SWITCH_ASSET",
                    "data": {
                        "clientId": "ybgc_gateway",
                        // 告警：0000YX00010101BB4B:给排水 故障：gz001ysj0001  gz001ysj0002 gz001jps0003 gz001xfxt0004
                        "assetId": nv,
                        // 类型  1模型2仿真3反演
                        "post_type": "1",
                        // 状态   2轻微告警 1严重告警
                        // "device_status": "2"
                    }
                },
                "tm": new Date().getTime()
            }, '*')
        },
        // 从url中获取params参数
        getQueryVariable(variable) {
            console.log('gggggg')
            var query = window.location.search.substring(1);
            // let query = 'name=xiaoliu&age=18&gender=1'
            var vars = query.split("&")
            console.log('vars:', vars)
            for (var i = 0; i < vars.length; i++) {
                console.log('进入循环')
                var pair = vars[i].split("=")
                console.log('pair:', pair)
                if (pair[0] == variable) {
                    // console.log(pair[1])
                    return pair[1]
                } else {
                    return null
                }
            }

        }
    }
};
</script>
<style scoped lang="scss">
* {
    margin: 0;
    padding: 0;
}

.home {
    width: 608px;
    height: 592px;
    // margin: 0 auto;
}

.MXGL_card {
    width: 100%;
    height: 592px;
    position: relative;
    width: 100%;
    background: url("../assets/MXGL-BG.png") no-repeat;
    // background-color: #101d29;
    margin-bottom: 10px;

    // 标题
    .MXGL_title {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    // 大标题
    .big_title {
        width: 144px;
        height: 40px;
        line-height: 38px;
        font-size: 20px;
        font-weight: bold;
        font-family: MicrosoftYaHei-Bold;
        line-height: 38px;
        color: #e8e8e8;
        padding-left: 56px;
        text-align: center;
        flex: 1;
        /* 占据左边的剩余空间 */
        text-align: left;
    }

    // // 小标题
    // .xiao_title {
    //   height: 16px;
    //   font-family: MicrosoftYaHei;
    //   font-size: 16px;
    //   font-weight: normal;
    //   font-stretch: normal;
    //   letter-spacing: 0px;
    //   color: #40e5f0;
    //   flex: 0.1;
    //   margin-right: 42px;
    //   /* 占据右边的剩余空间 */
    //   text-align: right;
    // }

    .MXGL_content {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        box-sizing: border-box;
        width: 608px;
        height: 552px;
        padding: 20px;

        .search {
            width: 210px;
            height: 26px;
            // background-color: pink;
        }

        .tree {
            width: 280px;
            height: 232px;
            // background-color: #fff;
            margin-top: 26px;
            margin-left: 6px;
        }
    }
}

::v-deep .el-input__inner {
    color: #fff;
    background-color: #202f3e;
    border: solid 1px #40486a;

    .el-icon-search {
        border-radius: 2px;
    }
}

::v-deep .el-tree {
    background-color: transparent;
    color: #fff;

    .el-tree-node {
        margin-top: 4px;
    }

    .el-tree-node__content:hover {
        background-color: #3e6285;
        // color: #37c2cd;
    }

    .el-tree-node:focus>.el-tree-node__content {
        background-color: #172533 !important;
        color: #40e5f0;
    }
}
</style>